<template>
  <view class="home flex column">
    <u-navbar :is-back="true" title="企业信息" :title-bold="true" back-icon-color="#fff" title-color="#fff"
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"></u-navbar>
    <!-- 搜索框 -->
    <picker-item v-model="searchData.customerName" :options="nameList" @change="handleSelectChange" />
    <!-- 列表 -->
    <scroll-view :scroll-y="true" class="container item one" refresher-enabled="true" :refresher-triggered="triggered"
      :refresher-threshold="50" refresher-background="#F5F5F5" @refresherrefresh="onRefresh"
      @refresherpulling="onPulling" @refresherrestore="onRestore" @refresherabort="onAbort"
      @scrolltolower="onScrollToLower">
      <view class="container-body">
        <template v-if="courseList && courseList.length">
          <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 30rpx' }"
            :head-style="{ padding: '20rpx 30rpx 10rpx' }" :head-border-bottom="false"
            v-for="(item, index) in courseList" :key="index" @click="handleCourseClick(item)">
            <view slot="head">
              <view class="card-row u-flex">
                <view class="card-row-title t-title f-bold">{{ item.shortName }}</view>
              </view>
            </view>
            <view slot="body">
              <view class="card-row u-flex u-p-t-10 u-p-b-20">
                <view class="card-row-title">
                  <text class="t-title">{{ item.legalPerson }}</text>
                  <text class="u-m-l-20 t-section">{{ item.contactPhone }}</text>
                </view>
                <view class="tag" v-if="item.produceStateName">
                  <text class="t-deep-green">{{ item.produceStateName }}</text>
                </view>
              </view>
            </view>
          </u-card>
          <view class="p-t-10 p-b-10">
            <u-loadmore :status="status" />
          </view>
        </template>
        <template v-if="showEmpty">
          <view class="c-empty p-absolute-center">
            <u-empty text="暂无数据"></u-empty>
          </view>
        </template>
      </view>
    </scroll-view>

  </view>
</template>

<script>
import PickerItem from "../../components/pickerItem/pickerItem.vue";
export default {
  name: "index",
  components: { PickerItem },
  data() {
    return {
      searchData: {
        countyNo: "",
        customerName: "",
        pageSize: 20,
        pageNumber: 1,
      },
      tagColor: ["#49BDCC", "#dd524d"],
      background: {
        backgroundColor: "#F8F8F8",
      },
      triggered: false, // 下拉刷新
      showEmpty: false,
      status: "loading",
      courseList: [],
      barList: [],
      showSearch: false,
      nameList: [],
      index: 0,
    };
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      this.searchData.pageNumber = 1;
      this.searchData.pageSize = 20;
      // this.searchData.countyNo = "";
      // this.searchData.customerName = "";
      this.status = "loading";
      this.showEmpty = false;
    },
    getNum(data) {
      let title = "";
      if (data.state === 0) {
        title = "正常生产";
      } else if (data.state === 1) {
        title = "异常";
      }
      return title;
    },
    /**
     * 请求数据
     */
    async getData() {
      const newRes = await this.$post("/mobile/enterpriseInfo/work/dataList", this.searchData);
      if (newRes && newRes.body.content) {
        this.courseList =
          this.searchData.pageNumber === 1 ? newRes.body.content : this.courseList.concat(newRes.body.content);
        // 到底了
        if (newRes.body.content.length < this.searchData.pageSize) {
          this.status = "nomore";
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.courseList && this.courseList.length === 0) {
          this.showEmpty = true;
        } else {
          this.showEmpty = false;
        }
      }
    },
    /**
     * 查看
     */
    handleCourseClick(data) {
      const { shortName, id, superviseIndustry } = data;
      uni.navigateTo({
        url: `/pages/firmInfo/details?coalMineName=${shortName}&customerId=${id}&superviseIndustry=${superviseIndustry}`,
      });
    },
    /**
     * select选中
     */
    handleSelectChange(val) {
      setTimeout(() => {
        this.getData();
      }, 300);
    },
    /**
     * 请求煤矿名称列表
     */
    getOptions() {
      this.nameList = getApp().globalData.coalList;
    },
    /**
     * 上拉加载
     */
    onScrollToLower() {
      if (this.status === "loading") {
        this.searchData.pageNumber++;
        this.getData();
      }
    },
    onPulling(e) {},
    onRefresh() {
      if (this.Isfreshing) return;
      this.Isfreshing = true;
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true;
        this.init();
        this.getData();
        setTimeout(() => {
          this.triggered = false; // 触发onRestore，关闭刷新图标
          this.Isfreshing = false;
        }, 1200);
      }
    },
    onRestore() {},
    onAbort() {},
  },
  computed: {
    midButton() {
      return getApp().globalData.tabbarMidButton;
    },
  },
  onLoad() {
    this.init();
    this.getData();

    this.barList = getApp().globalData.list;
    this.getOptions();
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .card-row {
    .tag {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 10rpx 28rpx;
      border-top-left-radius: 20rpx;
      background: rgba(15, 100, 58, 0.3);
    }
  }
}
</style>
